<template>
  <div class="text-[#fff]">
    {{ $t("page.casino.supplier") }}
    <el-select
      v-model="valShowsupplier"
      placeholder=""
      clearable
      multiple
      filterable
      @change="changeShowsupplier"
      popper-class="mySelectStyle"
      :loading="loading"
    >
      <el-option
        v-for="item in main2.business_list"
        :key="item.code"
        :label="item.code"
        :value="item.code"
      >
        <div class="flex justify-between items-center">
          <div>{{ item.code }}</div>
          <div
            class="w-[60px] h-[20px] bgImg"
            :style="
              'background-image:url(' + main2.static_base_url + item.logo + ')'
            "
          ></div>
        </div>
      </el-option>
    </el-select>
  </div>
</template>

<script lang="ts" setup>
import { watch, ref, onMounted } from "vue";
import { mainAct } from "@/store/activeda";
const main2 = mainAct();

const valShowsupplier = ref([]);
const loading = ref(true);

const emit = defineEmits(["updatadSupplier"]);
const changeShowsupplier = () => {
  emit("updatadSupplier", valShowsupplier.value);
};

const clearElect = () => {
  valShowsupplier.value = [];
};

onMounted(() => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 1000);
});

defineExpose({ clearElect });
</script>

<style lang="scss" scoped>
.bgImg {
  // background-repeat: no-repeat;
  // background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

:deep(.el-input__wrapper) {
  background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%);
  box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
}

:deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
  box-shadow: 0 0 0 0 var(--el-select-input-focus-border-color) inset !important;
}

:deep(.el-select .el-input.is-focus .el-input__wrapper) {
  box-shadow: 0 0 0 0 var(--el-select-input-focus-border-color) inset !important;
}

:deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
  background: #0b3571;
}

:deep(.el-select .el-input__wrapper) {
  background: #0b3571;
}
</style>

<style lang="less">
.el-select__wrapper {
  border: 1px solid #426073;
  box-shadow: none !important;
}
//下拉框的背景色
.el-select-dropdown__item {
  background: #1f2937 !important;
}

//下拉框的链接小方块
.el-select-dropdown__item.is-active {
  background: #1f2937 !important;
}

//鼠标移动上去的选中色
.el-select-dropdown__item.hover,
//下拉框背景色
.el-popper.is-light.mySelectStyle {
  background-color: #1f2937 !important;
  border: 1px solid #426073 !important;
}

//下拉框的链接小方块
.mySelectStyle.el-popper[data-popper-placement^="bottom"]
  .el-popper__arrow::before {
  background: #1f2937 !important;
  border-top: 1px solid #426073 !important;
}

.el-tag.el-tag--info {
  color: #fff;
  background: #1a2c38 !important;
}
.el-icon .el-tag__close {
  color: #fff !important;
}
.mySelectStyle.el-popper[data-popper-placement^="top"]
  .el-popper__arrow::before {
  background: #1f2937 !important;
  border: 1px solid #1f2937 !important;
}

//鼠标移动上去的选中色
.mySelectStyle {
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    color: #fff !important;
    background: #1475e1 !important;
  }

  //下拉框的文本颜色
  .el-select-dropdown__item {
    color: #8e97a6;
  }

  //选中之后的颜色
  .el-select-dropdown__item.selected {
    color: #fff !important;
    background: #2a77c6 !important;
  }
}

.el-select {
  width: 400px;
}
@media screen and (max-width: 601px) {
  .el-select {
    width: 280px;
  }
}
</style>
